@import '../../ant-prefix-cls.less';

@headerHeight: 64px;
@layout-header-background: #394E9E;

.header {
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    left: 0;
    width: 100vw; // 不会因为body出现滚动条而抖动
    height: @headerHeight;
    padding-right: 16px;
    background-repeat: no-repeat;
    background-position: right;

    .logoContainer {
        display: inline-flex;
        align-items: center;
        flex: 0;
        position: relative;
        height: @headerHeight;
        overflow: hidden;
        transition: flex .3s cubic-bezier(0.2, 0, 0, 1) 0s;

        h1 {
            color: #fff;
        }

        a {
            width: 100%;
            height: 100%;
        }
    }

    .trigger {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0;
        height: 100%;
        font-size: 20px;
        cursor: pointer;
        transition: all .3s;
        padding: 0 5px;
        color: #fff;

        &:hover {
            opacity: 0.5;
        }
    }

    .center {
        flex: 1;
        overflow: auto;

        .antdPrefixCls({
            .@{prefixCls}-menu {
                background: none;
            }

            .@{prefixCls}-breadcrumb a,
            .@{prefixCls}-breadcrumb .@{prefixCls}-breadcrumb-link,
            .@{prefixCls}-breadcrumb .@{prefixCls}-breadcrumb-separator {
                color: #fff;
            }
        });

    }

    .right {
        display: flex;
        align-items: stretch;
        flex: 0;
        height: 100%;
    }

    &[data-theme=dark] {
        background: @layout-header-background;
        box-shadow: 2px 0 6px lighten(@layout-header-background, 10%);

        .logo {
            background: @layout-header-background;
            box-shadow: none;
        }

        .right {
            color: #fff;
        }
    }
}
